<!--
 * @Author: your name
 * @Date: 2021-12-28 14:09:19
 * @LastEditTime: 2021-12-31 14:27:45
 * @LastEditors: hyman
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \shop\src\components\product\cart\index.vue
-->
<template>
    <!-- 导航 -->
    <van-nav-bar title="购物车" left-text="" left-arrow @click-left="back"></van-nav-bar>

    <!-- 购物车列表 -->
    <van-checkbox-group v-model="checked">
        <div class="product" v-for="item in cartlist" :key="item">
            <!-- 复选框 -->
            <van-checkbox :name="item.id" class="item"></van-checkbox>

            <!-- 购物车商品 滑动单元格 -->
            <van-swipe-cell>
                <van-card :price="item.total" :desc="'单价：￥' + item.price" :title="item.product.name"
                    :thumb="item.product.cover_cdn">
                    <!-- 库存 -->
                    <template #tags>
                        <p>库存：{{ item.product.stock }}</p>
                    </template>

                    <!-- 右下角计数器 -->
                    <template #footer>
                        <van-stepper v-model="item.nums" :name="item.id" disable-input @change="CartStep" />
                    </template>
                </van-card>

                <!-- 右侧滑动区域的内容 -->
                <template #right>
                    <van-button square text="删除" type="danger" class="delete-button" @click="CartDel(item.id)" />
                </template>
            </van-swipe-cell>
        </div>
    </van-checkbox-group>

    <!-- 提交订单栏 -->
    <van-submit-bar :price="total" button-text="立即下单" @submit="SubmitOrder" />
</template>
<script>
import { mapState } from 'vuex'
export default {
    emits: ['toggle'],
    created() {
        this.$emit('toggle', false)

        this.cartData();
    },
    data() {
        return {
            cartlist: [],
            checked: [],
            total: 0,
            LoginUser: this.$cookies.get('LoginUser')
        }
    },
    computed: {
        // 合计总数
        total() {
            // 当复选框没有选中任何一个 那么总价就是0
            if (this.checked.length <= 0) {
                return 0;
            }

            var total = 0
            // this.checked 选中的商品记录 数组 选中的购物车id 
            // this.cartlist 所有的购物车商品  数组对象

            //如果有选，就要去拿购物车的价格，来统计
            this.cartlist.forEach((item) => {
                // in_array id是否在数组内 includes 判断是否在数组内
                //如果在数组里就说明当前购物车记录被选中
                if (this.checked.includes(item.id)) {
                    total += parseFloat(item.total)
                }
            })
            total = parseFloat(total) * 100
            return total
        },
        ...mapState({
            'user': state => state.user.User
        })

    },
    methods: {
        back() {
            this.$router.go(-1)
        },
        // 跳转到确认订单页面
        SubmitOrder() {
            if (this.checked.length > 0) {

                //将数组转化为字符串
                var cartids = this.checked.join(',')

                this.$router.push({
                    path: '/product/cart/confirm',
                    query: {
                        cartids: cartids
                    }
                })

            } else {
                //没有选择任何购物车记录
                this.$notify({
                    message: '请选择下单商品',
                    duration: 1000,
                })

                return false
            }
        },
        // 获取购物车列表
        async cartData() {

            var result = await this.$api.cartList({ userid: this.LoginUser.id })

            if (result.code == 0) {
                //购物车数据请求失败
                this.$notify({
                    message: result.msg,
                    duration: 1000,
                })
            }

            this.cartlist = result.data

        },
        // 编辑购物车
        async CartStep(value, detail) {

            var nums = value
            var cartid = detail.name

            var data = {
                nums,
                cartid,
                userid: this.LoginUser.id
            }

            var result = await this.$api.cartEdit(data)

            if (result.code == 0) {
                //购物车数据请求失败
                this.$notify({
                    message: result.msg,
                    duration: 1000,
                })
            }

            this.cartData();
        },
        CartDel(id) {

            //弹出确认对话框
            this.$dialog.confirm({
                'title': '删除购物车',
                'message': '是否确认删除商品'
            })
                .then(async () => {

                    var data = {
                        userid: this.LoginUser.id,
                        cartid: id
                    }

                    var result = await this.$api.cartDelete(data)

                    if (result.code == 0) {
                        //购物车数据请求失败
                        this.$notify({
                            message: result.msg,
                            duration: 1000,
                        })
                    }

                    this.cartData();
                })
        }
    }
}
</script>
<style>
.product {
    position: relative;
}

.product .van-card {
    padding-left: 3em;
}

.product .van-card__footer {
    position: absolute;
    right: 1em;
    bottom: 1em;
}


.item {
    position: absolute;
    z-index: 1;
    top: 42%;
    left: 1%;
}

.delete-button {
    height: 100% !important;
}
</style>